<!-- 我买到的 -->
<template>
	<view class="buy">
		<view class="tab">
			<view class="tabitem"
				v-for="(item, i) in tab" :key="i" 
				:class="currentIndex == item.id ? 'active' : ''" 
				@click="chang_index(item.id)">
			{{ item.name }}
		</view>
		</view>
		<view class="content">
			<view v-if="list.length>0">
				<view class="goods" v-for="item in list" :key='item' @click="go_detail(item.id)">
					<view class="goods-item">
						<view class="goodsInfo">
							<view class="img" v-if="item.goods">
								<template v-if="item.goods.goods_images.length>0">
									<image :src="item.goods.goods_images[0]" mode=""></image>
								</template>
							</view>
							<view class="info">
								<view class="title">
									{{item.goods.goods_name}}
								</view>
								<view class="price">￥{{item.amount}}</view>
								<view class="status">{{item.state_text}}</view>
							</view>
						</view>
						<view class="status_button">
							<view class="phone" @click.stop="make_phone(item.user.phone)">
								<image src="https://community.chuangxiangdianli.com/images/neighborimg/market/phone@2x.png" mode=""></image>
								<text>联系卖家</text>
							</view>
							<view class="button">
								<view v-if="item.state_text=='待取货'" 
									@click.stop="comfirm_receipt(id)">已取货</view>
								<view 
									@click.stop="del_order(item.id)"
									v-if="item.state_text=='已完成'|| item.state_text=='待评价'">
									删除订单
								</view>
								<view v-if="item.state_text=='待评价'">去评价</view>
								<view 
									v-if="item.state_text=='已完成'" 
									@click.stop="look_message(item.id)">查看评价</view>
								<view v-if="item.state_text== '待付款'" 
									@click.stop="go_pay(item.order_sn)">去付款</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nodata" v-else>
				<image 
				src="https://community.chuangxiangdianli.com/images/empty/nodata.png" mode=""></image>
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
// 引入封装的请求
import request from '@/utils/request.js'	
export default {
	data() {
		return {
			currentIndex: 0,
			tab: [
				{
					id:0,
					name:'全部'
				},
				{
					id:1,
					name:'待支付'
				},
				{
					id:2,
					name:'待取货'
				},
				{
					id:3,
					name:'待评价'
				},
				{
					id:4,
					name:'已完成'
				}
			],
			// 商品列表
			list:[],
			// 当前页码
			pageNo:1,
			// 列表个数 
			limit:10,
			// 是否正在请求数据
			is_loading:false,
			// 是否请求完数据
			is_bottom:false,
			// 底部正在加载中
			status: 'loadmore',
		};
	},
	onLoad() {
		this.get_shop_list()
	},
	// 页面底部加载
	onReachBottom(){
		let that = this
		this.status = 'loading';
		// console.log(11111)
		if(that.status = 'nomore' || that.is_loading){
			return false
		}
		this.pageNo++
		setTimeout(() => {
			that.get_shop_list(true)
		}, 1000)
	},
	methods: {
		chang_index(id) {
			this.currentIndex = id
			this.status = 'loadmore'
			this.is_loading = false
			this.pageNo = 1
			this.get_shop_list()
		},
		// 确认收货
		comfirm_receipt(id){
			let that = this
			request.post({
				url:'Mini/circle/flea/orderComplete',
				data:{
					order_id:id
				}
			}).then(res=>{
				uni.showToast({
					title:res.msg
				})
				if(res.code==200){
					that.get_shop_list()
				}
			})
		},
		// 去支付
		go_pay(order_sn){
			let that = this
			// 获取支付参数 
			request.get('Mini/circle/flea/getPayConfig',{
				order_sn:order_sn
			}).then(res=>{
				if(res.code==200){
					let paydata = res.data
					uni.requestPayment({
					    provider: 'wxpay',
					    timeStamp: paydata.timeStamp,
					    nonceStr: paydata.nonceStr,
					    package: paydata.package,
					    signType: paydata.signType,
					    paySign: paydata.paySign,
					    success: function (res) { 
							uni.showToast({
								title:"支付成功",
								icon:'none'
							});
							
							uni.redirectTo({
								url:'/neighbor/market/mine/buy/index'
							})
					    },
					    fail: function (err) {
					        console.log('fail:' + JSON.stringify(err));
					    }
					});
				}
			})
		},
		// 删除订单 
		del_order(id){
			let that = this
			uni.showModal({
			    title: '提示',
			    content: '确定删除当前订单吗',
			    success: function (res) {
			        if (res.confirm) {
						that.$mrequest2({
							url:'Mini/circle/flea/order/'+id,
							method:'DELETE',
							data:{
								id
							}
						}).then(res=>{
							if(res.code==200){
								that.get_shop_list()
							}
						})
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		// 查看评价
		look_message(id){
			uni.navigateTo({
				url:'/neighbor/market/order/orderComment?id='+id+'&type=1'
			})
		},
		// 查看商品详情
		go_detail(id){
			uni.navigateTo({
				url:'/neighbor/market/order/orderDetail?id='+id +'&type=1'
			})
		},
		// 拨打电话
		make_phone(phone){
			uni.makePhoneCall({
			    phoneNumber: phone //仅为示例
			});
		},
		// 获取商品列表
		get_shop_list(turn){
			let that = this
			let state = that.currentIndex==0?'':that.currentIndex
			that.is_loading = true
			request.get('Mini/circle/flea/myByOrder',{
				page:that.pageNo,
				limit:that.limit,
				state
			}).then(res => {
				console.log('首页数据', res)
				that.is_loading = false
				if (res.code==200) {
					if(turn){
						if(res.data.data.length>0){
							that.list = [
								...that.list,
								...res.data.data
							]
						}
					}else{
						that.list = res.data.data
					}
					if(res.data.count==that.list.length){
						// that.is_boottom = true
						that.status = 'nomore';
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			}).catch(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			})
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f3f5f8;
}
.buy {
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	position: relative;
	.content{
		width: 100%;
		box-sizing: border-box;
		padding: 0 22rpx;
		margin-top: 110rpx;
		margin-bottom: 40rpx;
		.nodata{
			width: 100%;
			display: flex;
			justify-content: center;
			&>image{
				width: 400rpx;
				height: 400rpx;
			}
		}
		.goods{
			width: 100%;
			height: 313rpx;
			background: #FFFFFF;
			margin: 10rpx 0;
			padding: 50rpx 30rpx;
			padding-bottom: 10rpx;
			.goodsInfo{
				width: 100%;
				height:170rpx;
				display: flex;
				align-items: top;
				justify-content: flex-start;
				.img{
					width: 30%;
					image{
						width: 170rpx;
						height: 170rpx;
					}
				}
				.info{
					width: 70%;
					.title{
						font-size: 30rpx;
						font-family: Hiragino Sans GB;
						font-weight: normal;
						color: #333333;
						margin-bottom: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.price{
						font-size: 30rpx;
						font-family: Hiragino Sans GB;
						font-weight: bold;
						color: #B83D42;
						margin-bottom: 20rpx;
					}
					.status{
						font-size: 30rpx;
						font-family: Hiragino Sans GB;
						font-weight: normal;
						color: #B83D42;
					}
				}
				
			}
			.status_button{
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.phone{
					image{
						width: 35rpx;
						height: 35rpx;
						margin-right: 30rpx;
					}
					font-size: 28rpx;
					font-family: Hiragino Sans GB;
					font-weight: normal;
					color: #333333;
				}
				.button{
					view{
						display: inline-block;
						width: 152rpx;
						height: 52rpx;
						border: 1rpx solid #333333;
						border-radius: 10rpx;
						font-size: 28rpx;
						font-family: Hiragino Sans GB;
						font-weight: normal;
						color: #333333;
						text-align: center;
						line-height: 52rpx;
						margin: 0 6rpx;
					}
				}
			}
		}
	}
	
	.tab {
		width: 100%;
		height: 99rpx;
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
		box-sizing: border-box;
		padding: 0 40rpx;
		padding-right: 70rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
		.tabitem {
			font-size: 28rpx;
			color: #a4a3a8;
			line-height: 94rpx;
		}
		.active {
			color: #000;
			font-weight: bolder;
			border-bottom: 5rpx solid #fbb10d;
		}
	}
}
</style>

